import React, { useState } from 'react';
import './index.scss'
import { Button, Modal } from 'antd';
import order from '../../../store/YeGuoPing/order';
export default function ParticultextTop() {
    const [weight, setquZhong] = useState('')
    const [categoryName, setmiChen] = useState('')
    const [key, setKey] = useState('')
    // 输入框值
    const leiMu =(e)=>{
        setmiChen(e.target.value)
    }
    const quanZhong =(e)=>{
        setquZhong(e.target.value)
    }

    //删除按钮
    const [isModalOpen2, setIsModalOpen2] = useState(false);
    // console.log("删除按钮");
    const delet = () => {
        setIsModalOpen2(true);
      };
    
      const handleOk2 = () => {
        setIsModalOpen2(false);
        console.log('删除')
      };
    
      const handleCancel2 = () => {
        setIsModalOpen2(false);
      };
    //添加按钮
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
        console.log("添加");
      };
    
      const handleOk = () => {
        setIsModalOpen(false);
        console.log('确定')
        setKey(Math.ceil(Math.random()*5))
        order.compileAdd(key,categoryName, weight)
      };
    
      const handleCancel = () => {
        setIsModalOpen(false);
      };
    //inout框里的值
    const search = (e) => {
        const inpS = e.target.value
        console.log(inpS)
    }
    //搜索按钮
    const souSo = () => {

    }
    return (
        <div>
            <div className='smellTbox'>
                <span>类目名称</span><span><input type="text" onBlur={search} /></span><Button className='souS' onClick={souSo}><p>搜索</p></Button>

            </div>
            <div className='buttBox'>
                <div>
                    <button onClick={showModal}><p>添加</p></button>
                </div>
                <div>
                    <button onClick={delet}><p>删除</p></button>
                </div>
            </div>
            {/* 添加 */}
            <Modal
                className='Modaltext'
                title="添加类目"
                open={isModalOpen} 
                onOk={handleOk} 
                onCancel={handleCancel}
                okText="确认"
                cancelText="取消"
            >
                <div className='wenBen'>
                    <div>
                        <span>类目名称</span>
                        <input onChange={leiMu} value={categoryName}></input>
                    </div>
                </div>
                <div className='wenben'>
                    <div>
                        <span>权重</span>
                        <input onChange={quanZhong} value={weight}></input>
                    </div>
                </div>
            </Modal>
            {/* 删除 */}
            <Modal
                className='Modaltext'
                title="删除"
                open={isModalOpen2} 
                onOk={handleOk2} 
                onCancel={handleCancel2}
                okText="确认"
                cancelText="取消"
            >
                <h3>确定要删除此类目吗？</h3>
            </Modal>
        </div>
    )
}
